<template>
    <div>
        <div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/manage/item' }">添加商品</el-breadcrumb-item>
                <el-breadcrumb-item>查看库存商品</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="item-body">
        <SearchItem></SearchItem>
        <ListItem></ListItem>
        <Pagination :paginationObject="pagination" :paginationMethod="listItems"></Pagination>
        </div>
        <AddItem></AddItem>
        <SelectItem></SelectItem>
    </div>
</template>

<script>
    import ListItem from "../../components/item/ListItem";
    import SearchItem from "../../components/item/SearchItem";
    import SelectItem from "../../components/item/SelectItem";
    import Pagination from "../../components/Pagination";
    import AddItem from "../../components/item/AddItem";
    import {mapActions,  mapState} from "vuex";

    export default {
        components: {ListItem, SearchItem,SelectItem,Pagination,AddItem},
        computed: {
            ...mapState("item", ["pagination"])
        },
        methods: {
            ...mapActions("item", ["listItems"])
        }
    }
</script>

<style>
    .item-body {
        width: 100%;
        margin-top: 40px;
    }

    .item-input-with-select {
        width: 40%;
    }

    .item-input-with-select .el-input-group__prepend {
        background-color: #fff;
    }

    .item-input-with-select .el-input {
        width: 120px;
    }

    .item-el-table {
        margin-top: 30px;
    }
</style>
